import React, { FC, useEffect } from 'react';
import { Card, List, Avatar } from 'antd';
import { connect, RankModelState, ConnectProps, history } from 'umi';
import styles from './leftSider.less';

interface PageProps extends ConnectProps {
  rank: RankModelState;
  dispatch: any;
}

const LeftSider: FC<PageProps> = (props: any) => {
  let { toplist, topId } = props.rank;
  let gruop: any = [
    {
      title: '云音乐特色榜',
      list: [],
    },
    {
      title: '全球媒体榜',
      list: [],
    },
  ];
  toplist.forEach((item: any, index: number) => {
    let obj = {
      id: item.id,
      title: item.name,
      avatar: item.coverImgUrl,
      description: item.updateFrequency,
    };
    if (item.ToplistType) {
      gruop[0].list.push(obj);
    } else {
      gruop[1].list.push(obj);
    }
  });

  useEffect(() => {
    dataSource();
  }, []);

  let dataSource = () => {
    props.dispatch({
      type: 'rank/getToplist',
    });
  };

  let getList = (item: any) => {
    props.dispatch({
      type: 'rank/changeTopId',
      payload: {
        topId: item.id,
      },
    });
    history.push({
      pathname: '/rank',
      query: {
        topId: item.id,
      },
    });
  };

  return (
    <div className={styles.leftSider}>
      {gruop.map((data: any, index: number) => (
        <Card
          title={data.title}
          bordered={false}
          key={index}
          className={styles.card}
          bodyStyle={{ padding: '24px 0px' }}
        >
          <List
            itemLayout="horizontal"
            dataSource={data.list}
            renderItem={(item: any) => (
              <List.Item
                className={topId == item.id ? styles.active : ''}
                onClick={() => {
                  getList(item);
                }}
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} shape="square" size={46} />}
                  title={item.title}
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </Card>
      ))}
    </div>
  );
};

export default connect(({ rank }: { rank: RankModelState }) => ({ rank }))(
  LeftSider,
);
